<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px" :disabled="isDetail">
    <div class="form">
      <el-form-item label="水表号" prop="waterMeterNumber">
        <el-input
          v-model="form.waterMeterNumber"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="电表号" prop="electricMeterNumber">
        <el-input
          v-model="form.electricMeterNumber"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="燃气表号" prop="gasMeterNumber">
        <el-input
          v-model="form.gasMeterNumber"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="房屋租赁许可证号" prop="rentalLicenseNumber" label-width="130px">
        <el-input
          v-model="form.rentalLicenseNumber"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="房源核验码" prop="houseCheckCode" label-width="130px">
        <el-input
          v-model="form.houseCheckCode"
          placeholder="请输入"
        />
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
export default {
  name: 'additional-info',
  props: {
    isDetail: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        waterMeterNumber: '',
        electricMeterNumber: '',
        gasMeterNumber: '',
        rentalLicenseNumber: '',
        houseCheckCode: ''
      },
      rules: {}
    }
  },
  methods: {
    // 初始化表单数据
    init() {
      this.resetForm()
      if (this.data) {
        this.$nextTick(() => {
          this.form = {
            ...this.data
          }
        })
      }
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        waterMeterNumber: '',
        electricMeterNumber: '',
        gasMeterNumber: '',
        rentalLicenseNumber: '',
        houseCheckCode: ''
      }
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        let formData = JSON.parse(JSON.stringify(this.form))
        this.$emit('submit', formData)
        this.resetForm()
      })
    }
  }
}
</script>


<style scoped lang="scss">
.form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
</style>
